<template>
	<view v-if="isPhoneBox">
		<view class="mobile-bg" @click="close"></view>
		<view class="mobile-mask animated" :class="{slideInUp:isUp}">
			<view class="info-box">
				<image :src="logoUrl" class="log-image"></image>
				<!-- <view class="title">获取授权</view> -->
				<view class="txt">请完善信息,以便为您提供更好的服务</view>
				<view class="list">
					<view class="item tn-flex tn-flex-row-left">
						<view>头像</view>
						<view class="mr">
							<button class="avatar-wrapper tn-flex tn-flex-row-left tn-flex-col-center" open-type="chooseAvatar"
								@chooseavatar="onChooseAvatar">
								<image v-if="avatar" class="avatar" v-model="avatar" :src="avatar"></image>
								<text v-else class="tn-icon-image-fill avatar_sel"></text>
							</button>
						</view>
					</view>
					<view class="item tn-flex tn-flex-row-left">
						<view>昵称</view>
						<view class="mr">
							<input type="nickname" @input="onInputNickname" @blur="getnickname" v-model="nickName"
								class="weui-input" placeholder="请输入昵称" />
						</view>
					</view>
					<view class="item tn-flex tn-flex-row-left tn-padding-top-sm">
						<view>类型</view>
						<view class="mr dawn-color-red tn-text-bold">
							<text class="" v-if="authKey === 'traffic'">交警</text>
							<text class="" v-else>司机</text>
						</view>
					</view>
				</view>
			</view>
			<button v-if="isShowPhone" class="sub_btn" open-type="getPhoneNumber"
				@getphonenumber="getphonenumber">获取微信手机号</button>
			<button v-else class="sub_btn dis">请先完善信息后授权手机号</button>
		</view>
	</view>
</template>
<script>
	const app = getApp();
	import Routine from '@/libs/routine';
	import * as UserApi from "@/api/member/user";
	import * as AuthApi from "@/api/member/auth";
	import {
		TOKENNAME,
		HTTP_REQUEST_URL
	} from '@/config/app.js';
	import {
		HTTP_ADMIN_URL
	} from '@/config/app.js';
	import store from '@/store';
	export default {
		name: 'routine_phone',
		props: {
			isPhoneBox: {
				type: Boolean,
				default: false,
			},
			logoUrl: {
				type: String,
				default: '',
			},
			authKey: {
				type: String,
				default: '',
			}
		},
		data() {
			return {
				userType: 'app_drive',
				avatar: '',
				nickName: '',
				isShowPhone: false,
				keyCode: '',
				account: '',
				codeNum: '',
				isStatus: false
			}
		},
		mounted() {},
		methods: {
			radioChange(e) {
			    console.table(e);
				console.log(this.userType);
			},
			getnickname(e) {
				console.log("getnickname")
				// console.log("dataLee2"+JSON.stringify(e))
				this.nickName = e.detail.value;
				console.log(this.nickName)
				this.isShowPhone = true;
			},
			onInputNickname(e) {
				console.log("onInputNickname")
				// console.log("dataLee2"+JSON.stringify(e))
				this.nickName = e.detail.value;
				console.log(this.nickName)
				if (this.nickName === '') {
					this.isShowPhone = false;
				} else {
					this.isShowPhone = true;
				}
			},
			onChooseAvatar(e) {
				// console.log("dataLee"+JSON.stringify(e))
				const tempFilePath = e.detail.avatarUrl //上传的图片地址
				console.log(tempFilePath)
				this.avatar = tempFilePath;
				// this.avatar = 'data:image/jpeg;base64,' + wx.getFileSystemManager().readFileSync(e.detail.avatarUrl,'base64')
				console.log(this.avatar);
				//启动上传等待中...
				uni.showLoading({
					title: '图片上传中',
				});
				const urlPath = HTTP_REQUEST_URL + '/infra/file/upload'
				let localPath = tempFilePath;
				let that = this;
				uni.uploadFile({
					url: urlPath,
					filePath: localPath,
					name: 'file',
					header: {
						// #ifdef MP
						"Content-Type": "multipart/form-data",
						// #endif
						'tenant-id': 1,
						'Authorization': 'Bearer ' + store.state.app.token
					},
					success: function(res) {
						uni.hideLoading();
						if (res.statusCode == 403) {
							that.$util.Tips({
								title: res.data
							});
						} else {
							let data = res.data ? JSON.parse(res.data) : {};
							console.table(data);
							if (data.code === 200 || data.code === 0) {
								that.avatar = data.data;
							} else {
								that.$util.Tips({
									title: data.message
								});
							}
						}
					},
					fail: function(res) {
						uni.hideLoading();
						that.$util.Tips({
							title: '上传图片失败'
						});
					}
				});
			},
			// #ifdef MP
			// 小程序获取手机号码
			async getphonenumber(e) {
				if(this.userType === ''){
					return this.$util.Tips({
						title: '请选择用户类型'
					});
				}
				// 情况一：拒绝授权手机号码
				const phoneCode = e.detail.code
				if (!e.detail.code) {
					uni.showModal({
						title: '授权失败',
						content: '您已拒绝获取绑定手机号登录授权，可以使用其他手机号验证登录',
						confirmText: '知道了',
						confirmColor: '#3C9CFFFF'
					})
					return;
				}
				console.log("phoneCode:" + phoneCode);
				// 情况二：允许授权手机号码
				const loginCode = await Routine.getCode()
				console.log("loginCode:" + loginCode);
				
				if(this.authKey === 'traffic'){
					this.userType = 'app_traffic';
				}else{
					this.userType = 'app_drive';
				}
				
				console.log("loginCode:" + loginCode);
				this.loading = true;
				AuthApi.weixinMiniAppLogin(
					phoneCode,
					loginCode,
					'default',
					this.nickName,
					this.avatar,
					this.userType
				).then(res => {
					console.table(res);
					const data = res.data;
					// TODO 芋艿：refreshToken 机制
					this.$store.commit("LOGIN", {
						'token': data.accessToken
					});
					// 设置刷新令牌
					this.$store.commit('REFRESH_LOGIN', {
						refreshToken: data.refreshToken
					});
					// 保存opendId用于支付
					this.$store.commit("OPENID", data.openid);
					// 设置当前userId
					this.$store.commit("SETUID", data.userId);

					this.$store.commit("UPDATE_USERMENU", data.appMenu);

					this.getUserInfo();
				}).catch(e => {
					this.loading = false;
					this.$util.Tips({
						title: e
					});
				});
			},
			/**
			 * 获取个人用户信息
			 */
			getUserInfo: function() {
				let that = this;
				UserApi.getUserInfo().then(res => {
					uni.hideLoading();
					that.userInfo = res.data
					that.$store.commit("UPDATE_USERINFO", res.data);
					that.isStatus = true
					this.close()
				});
			},
			// #endif
			close() {
				this.$emit('close', {
					isStatus: this.isStatus
				})
			}
		}
	}
</script>

<style lang="scss">
	.mobile-bg {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		z-index: 1000;
	}

	.mobile-mask {
		z-index: 1001;
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		padding: 30rpx 30rpx 67rpx 30rpx;
		background: #fff;

		.info-box {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.log-image {
				width: 150rpx;
				height: 150rpx;
				border-radius: $dawn-border-radius;
				margin-bottom: 10rpx;
			}

			.title {
				margin-top: 30rpx;
				margin-bottom: 20rpx;
				font-size: 36rpx;
			}

			.txt {
				font-size: 30rpx;
				color: #868686;
			}
		}

		.sub_btn {
			width: 690rpx;
			height: 86rpx;
			line-height: 86rpx;
			margin-top: 20rpx;
			background: $dawn-theme-color;
			border-radius: 43rpx;
			color: #fff;
			font-size: 28rpx;
			text-align: center;
		}

		.dis {
			background: #868686 !important;
		}
	}

	.animated {
		animation-duration: .4s
	}

	.list {
		margin-top: 20rpx;
		font-size: 30rpx;
	}

	.item {
		align-items: center;
		margin: 30rpx 0px;
	}

	.avatar-wrapper {
		padding-left: 0px !important;
		padding-right: 0px !important;
		text-align: center;
		// width: 130rpx;
		// height: 130rpx;
		border-radius: 50%;
		background-color: #fff;

		.avatar {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
		}
		
		.avatar_sel {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			background: #666666;
			font-size: 65rpx;
			line-height: 100rpx;
			color: white;
		}
	}

	.weui-input {
		text-align: left;
		// width: 200rpx;
		width: 100%;
		height: 50rpx;
		border-bottom: 1px solid $dawn-theme-color;
	}

	.mr {
		margin-left: 30rpx;
	}
</style>